<template>
  <div>
    <div class="button-style1">
      <el-button
        type="warning"
        icon="el-icon-download"
        size="mini"
        @click="exportPDF"
        >导出</el-button
      >
    </div>
    <div id="pdfHtml" ref="printHtml">
      <div class="collect">
        <div class="collect-text">交接班日报表</div>
        <div class="collect-item">
          <div>站点名称：{{ dataSum.stationName }}</div>
          <div>营业日期：{{ dataSum.timeOnTrade }}</div>
          <div>班次：{{ dataSum.classesDayOrNight }}</div>
          <div>
            {{ dataSum.timeOnTrade ? `${dataSum.timeOnTrade} 00:00:00` : "" }}
            至
            {{ dataSum.timeOnTrade ? `${dataSum.timeOnTrade} 23:59:59` : "" }}
          </div>
        </div>

        <div class="item">
          <div class="title">油罐统计汇总</div>
          <div>
            <el-table
              :data="shiftHandover"
              border
              header-align="left"
              style="width: 100%; height: 100%"
            >
              <el-table-column label="接班" align="left">
                <el-table-column prop="oil_name" label="品类" align="left">
                </el-table-column>
                <el-table-column
                  prop="oil_ometer_name"
                  label="罐号"
                  align="left"
                >
                </el-table-column>
                <el-table-column prop="oil_hightjie" label="油高" align="left">
                </el-table-column>
                <el-table-column
                  prop="water_hightjie"
                  label="水高"
                  align="left"
                >
                </el-table-column>
                <el-table-column
                  prop="ometer_volumejiao"
                  label="数量（L/kg）"
                  align="left"
                >
                </el-table-column>
                <el-table-column prop="fuel_amount" label="付油量" align="left">
                </el-table-column>
              </el-table-column>
              <el-table-column label="交班" align="left">
                <el-table-column label="回罐" align="left"> 0</el-table-column>
                <el-table-column prop="oil_hightjiao" label="油高" align="left">
                </el-table-column>
                <el-table-column
                  prop="water_hightjiao"
                  label="水高"
                  align="left"
                >
                </el-table-column>
                <el-table-column
                  prop="ometer_volumejiao"
                  label="数量（L/kg）"
                  align="left"
                >
                </el-table-column>
                <el-table-column
                  prop="fuel_amount"
                  label="实收（元）"
                  align="left"
                >
                </el-table-column>
                <el-table-column label="损溢" align="left">0 </el-table-column>
              </el-table-column>
            </el-table>
          </div>
        </div>

        <div class="item">
          <div class="title">销售情况汇总</div>
          <div>
            <el-table
              :data="queryGroupByOil"
              border
              header-align="left"
              style="width: 100%; height: 100%"
            >
              <el-table-column prop="oil_name" label="类别" align="left">
              </el-table-column>
              <el-table-column prop="oil_price" label="单价" align="left">
              </el-table-column>
              <el-table-column prop="order_liters" label="交易量" align="left">
              </el-table-column>
              <el-table-column
                prop="receivable_amt"
                label="应收金额"
                align="left"
              >
              </el-table-column>
              <el-table-column prop="amt" label="实收金额" align="left">
              </el-table-column>
              <el-table-column
                prop="discount_amt"
                label="优惠金额"
                align="left"
              >
              </el-table-column>
              <el-table-column
                prop="avg_order_price"
                label="客单价"
                align="left"
              >
              </el-table-column>
            </el-table>
          </div>
        </div>

        <div class="item">
          <div class="title">按支付方式汇总</div>
          <div>
            <el-table
              :data="queryGroupByPayType"
              border
              header-align="left"
              style="width: 100%; height: 100%"
            >
              <el-table-column
                prop="pay_type"
                label="支付方式"
                align="left"
                :formatter="formatterPayType"
              >
              </el-table-column>
              <el-table-column label="消费" align="left">
                <el-table-column
                  prop="order_liters"
                  label="加油量"
                  align="left"
                >
                </el-table-column>
                <el-table-column prop="amt" label="加油金额" align="left">
                </el-table-column>
              </el-table-column>
              <el-table-column label="充值" align="left">
                <el-table-column
                  prop="transaction_amt"
                  label="线上充值"
                  align="left"
                >
                </el-table-column>
              </el-table-column>
              <el-table-column label="秒杀" align="left">
                <el-table-column
                  prop="sale_activity_amt"
                  label="秒杀订单金额"
                  align="left"
                >
                </el-table-column>
              </el-table-column>
              <el-table-column prop="refund_amt" label="退款" align="left">
              </el-table-column>
              <el-table-column prop="total" label="实收金额" align="left">
              </el-table-column>
              <el-table-column
                v-if="isShowCommission === 1"
                prop="commission"
                label="通道费"
                align="left"
              >
              </el-table-column>
              <el-table-column
                v-if="isShowCommission === 1"
                prop="withdrawal_amount"
                label="到账金额"
                align="left"
              >
              </el-table-column>
            </el-table>
          </div>
        </div>

        <div class="item">
          <div class="title">会员卡汇总（不含线上）</div>
          <div>
            <el-table
              :data="membershipList"
              border
              header-align="left"
              style="width: 100%; height: 100%"
            >
              <el-table-column label="POS充值" align="left">0</el-table-column>
              <el-table-column
                prop="allTransaction"
                label="后台充值"
                align="left"
              >
              </el-table-column>
              <el-table-column label="关注" align="left">0 </el-table-column>
              <el-table-column prop="allNewPeople" label="注册" align="left">
              </el-table-column>
            </el-table>
          </div>
        </div>

        <div class="item">
          <div class="title">油枪交接</div>
          <div>
            <el-table
              :data="queryGroupByOilGun"
              border
              header-align="left"
              style="width: 100%; height: 100%"
              :span-method="arraySpanMethod"
            >
              <el-table-column prop="oil_gun" label="枪号" align="left">
              </el-table-column>
              <el-table-column prop="oil_name" label="品类" align="left">
              </el-table-column>
              <el-table-column
                prop="startFlowMeter"
                label="开始泵码"
                align="left"
              >
              </el-table-column>
              <el-table-column
                prop="endFlowMeter"
                label="结束泵码"
                align="left"
              >
              </el-table-column>
              <el-table-column prop="totalWord" label="走字数" align="left">
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getPdf } from "@/api/exportPdf";
import { getReport } from "@/api/overview";

export default {
  data() {
    return {
      membershipList: [],
      // 汇总字段
      dataSum: {},
      // 油罐统计汇总
      shiftHandover: [],
      // 销售情况汇总
      queryGroupByOil: [],
      // 按支付方式汇总
      queryGroupByPayType: [],
      // 油枪交接
      queryGroupByOilGun: [],
      isShowCommission: null, // 是否开启通道费 0 关闭  1开启
    };
  },
  created() {
    if (
      this.$route.query.classesDayOrNight &&
      this.$route.query.stationId &&
      this.$route.query.stationName &&
      this.$route.query.timeOnTrade
    ) {
      this.dataSum = this.$route.query;
      this.getReport();
    } else {
      this.$message.error("系统异常，请联系管理员");
    }
  },

  methods: {
    // 获取表格信息
    getReport() {
      getReport({
        stationId: this.dataSum.stationId,
        timeOnTrade: this.dataSum.timeOnTrade,
      }).then((res) => {
        if (res.code === 200) {
          this.membershipList.push({
            allTransaction: res.data.allTransaction,
            allNewPeople: res.data.allNewPeople,
          });
          this.shiftHandover = res.data.shiftHandover;
          this.queryGroupByOil = res.data.queryGroupByOil;
          this.queryGroupByPayType = res.data.queryGroupByPayType;
          this.queryGroupByOilGun = res.data.queryGroupByOilGun;
          this.isShowCommission = res.data.isShowCommission;
          this.queryGroupByOilGun.push({
            oil_gun: "走字数合计",
            oil_name: res.data.totalWordCount,
          });
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (
        rowIndex === this.queryGroupByOilGun.length - 1 &&
        columnIndex === 1
      ) {
        return { rowspan: 1, colspan: 5 };
      }
    },
    exportPDF() {
      getPdf("交接日报表信息", "pdfHtml");
    },

    // 格式化支付类型
    formatterPayType(row, column) {
      const types = {
        wx: "微信支付",
        zfb: "支付宝",
        xj: "现金支付",
        dzk: "电子卡支付",
        pos: "POS机支付",
        yzf: "预支付",
        kbzf: "卡包支付",
        yhk: "银行卡支付",
        cdk: "车队卡支付",
        dkq: "实体卡支付",
      };
      if (types[row.pay_type] !== "合计" && !types[row.pay_type]) {
        return row.pay_type;
      } else {
        return row.pay_type !== "合计" ? types[row.pay_type] ?? "" : "合计";
      }
    },
  },
};
</script>
<style lang="scss">
.collect-text {
  margin-top: 20px;
}
.collect-item {
  font-size: 15px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin: 20px 0px;
}
::v-deep .card-table {
  padding: 10px;
  margin-top: 20px;
  background-color: #f8f8f8;

  .el-button {
    margin: 0 5px 0 0;
  }
}

// 表格样式
::v-deep .el-form-item {
  margin-bottom: 0;

  .el-form-item__label {
    padding: 0;
    margin: 0;
    height: 29px;
    font-weight: 400;
    font-size: 12px;
  }

  .el-button--cyan {
    margin-left: 20px;
  }
}

::v-deep .el-table {
  border: 1px #f8f8f8 solid;
  border-bottom: 1px #dfe6ec solid;
}

::v-deep .is-center {
  border: 1px transparent solid;
  border-bottom: 1px #f8f8f8 solid;
}

.collect {
  padding: 0 20px;
  width: 100%;
  box-sizing: border-box;

  .item {
    margin-top: 10px;

    .title {
      text-align: center;
      height: 35px;
      line-height: 35px;
      font-size: 16px;
      font-weight: bold;
    }
  }

  .cellcss {
    background-color: #f6f6f6;
  }

  .last {
    background-color: #f2f2f2;
    display: flex;
    justify-content: space-between;
    height: 35px;
    line-height: 35px;
    padding: 0 20px;
    box-sizing: border-box;
    margin-bottom: 20px;
  }
}

.oneLine {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.button-style1 {
  padding: 0 20px;
  margin-top: 12px;
  margin-bottom: 10px;
}
</style>
